<template>
    <div>
        <a-input-password v-model:value="password"></a-input-password>
    </div>
    <pre
        class="language-html"
    ><code>{{ `<a-input-password v-model:value="password"></a-input-password>` }}</code></pre>
    <pre class="language-javascript"><code>{{ `export default {
    data() {
        return {
            password: '',
        }
    }
}` }}</code></pre>
    <div v-for="type in typeList" :key="type.name" class="c-m-t-m">
        <p>{{ type.name }}</p>
        <a-table
            :headerList="type.headerList"
            :dataList="type.dataList"
        ></a-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            password: '',
            typeList: [
                {
                    name: 'props',
                    headerList: [
                        { name: 'name', text: '名称' },
                        { name: 'remark', text: '说明' },
                        { name: 'type', text: '类型' },
                        { name: 'default', text: '默认值' },
                    ],
                    dataList: [
                        { name: 'color', remark: '主题色', type: 'default | primary | secondary | success | warning | error', default: 'default' },
                        { name: 'disabled', remark: '是否禁用', type: 'boolean', default: 'false' },
                        { name: 'size', remark: '尺寸', type: 'xs | s | m | l | xl', default: 'm' },
                        { name: 'sharp', remark: '是否尖角', type: 'boolean', default: 'false' },
                        { name: 'rules', remark: '表单验证规则', type: 'Array<{name: required | minLength | maxLength | pattern | func, value: number | boolean | Function | any, errorMessage: string}>', default: '[]' },
                        { name: 'value', remark: '值', type: 'string', default: 'null' },
                        { name: 'clearable', remark: '是否可清空', type: 'boolean', default: 'true' },
                        { name: 'placeholder', remark: '占位文字', type: 'string', default: 'null' },
                        { name: 'attachButtonShown', remark: '是否显示“小眼睛”', type: 'boolean', default: 'true' },
                        { name: 'autoFocus', remark: '自动获得焦点', type: 'boolean', default: 'false' },
                    ],
                },
                {
                    name: 'emits',
                    headerList: [
                        { name: 'name', text: '名称' },
                        { name: 'remark', text: '说明' },
                        { name: 'params', text: '参数' },
                    ],
                    dataList: [
                        { name: 'update:value', remark: '值发生变化', params: 'string' },
                        { name: 'validate', remark: '输入验证', params: '[boolean, string]' },
                        { name: 'focus', remark: '获得焦点', params: 'null' },
                        { name: 'clear', remark: '失去焦点', params: 'null' },
                    ],
                }
            ]
        }
    }
}
</script>